{% extends '::base.html.twig' %} {% block title %}Accueil{% endblock %}

{% block body %}
<div class="row">
	<div id="add">
		<h2 id="main_title" class="center">Visualisation/Ajout des commentaires sur un parcours</h2>
		
		<div class="all_comm">
			<div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 well">
				<h3 class="center">Commentaires</h3>
				<div id="list_com" class="well">
{# 				{% for commentaire in listCommentaires %}#}
{# 					<div class="commentaire {{ loop.index }}">#}
{# 						<span class="comm"><strong>{{ commentaire.userName }}</strong>&nbsp;(<a href="#">répondre</a>)</span>#}
{# 						<p>{{ commentaire.contenu }}</p#}
{# 					</div#}
{# 				{% endfor %}#}
					<div class="a">
						<span class="comm"><strong>Jerome</strong>&nbsp;(<a href="#">répondre</a>)</span>
						<p>Ici beaucoup de trafic le soir</p>
						<div class="subcom">
							<span class="comm2"><strong>Toto</strong>&nbsp;(<a href="#">répondre</a>)</span>
							<p>Je pense que c'est plus dans cette portion là</p>
						</div>
					</div>
					<hr>
					<div class="b">
						<span class="comm3"><strong>Pahoua</strong>&nbsp;(<a href="#">répondre</a>)</span>
						<p>Beaucoup d'eau en temps de pluie</p>
					</div>
					<div id="newComment"></div>
				</div>
				<div class="add_comment">
					<span><strong>Poster un commentaire :</strong></span><br><br>
					<textarea id="my_comment" class="form-control" rows="5" cols="100"></textarea><br>
					<a id="send_button" class="btn btn-primary" href="#">Envoyer</a>
				</div>
			</div>
			<div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
				<div class="alert alert-danger" role="alert">
					<span><strong>Pour ajouter un commentaire :  (<span style="color: #746DFF;"><strong>Votre couleur</strong></span>)</strong></span><br>
					<span id="help">Etape 1 : Double cliquez sur le parcours pour ajouter le point de départ de votre commentaire
				</div>
				<div id="map-canvas"></div>
			</div>
		</div>
	</div>
</div>
{% endblock %} {% block javascripts %}
<script type="text/javascript">
	$(document).ready(function(){
		disable();
	});
	$(".a")
	  .on("mouseover", function(){
		  testPolyline.setMap(map);
		  })
	  .on("mouseleave", function(){
		  testPolyline.setMap(null);
		  });
	$(".subcom")
	  .on("mouseover", function(){
		  testPolyline.setMap(map);
		  testPolyline2.setMap(map);
		  })
	  .on("mouseleave", function(){
		  testPolyline.setMap(null);
		  testPolyline2.setMap(null);
		  });
	$(".b")
	  .on("mouseover", function(){
		  testPolyline3.setMap(map);
		  })
	  .on("mouseleave", function(){
		  testPolyline3.setMap(null);
		  });
	$(".c")
	  .on("mouseover", function(){
		  testPolyline4.setMap(map);
		  })
	  .on("mouseleave", function(){
		  testPolyline4.setMap(null);
		  });
	$("#send_button").click(function(){
		if($.trim($("#my_comment").val()).length != 0) {
			$("#newComment").html($("#newComment").html() + "<hr><div class='c'><span class='comm4'><strong>Test</strong>&nbsp;(<a href='#'>répondre</a>)</span><p>" + $("#my_comment").val() + "</p></div>");
			$("#my_comment").val("");
			cpt = 0;
			reloadMap();
			disable();
			google.maps.event.addDomListener(window, 'load', initialize);
		}
	});
	</script>
{% endblock %}
